<template>
  <div>
    <br/>

    <el-row :gutter="20">
      <el-col :span="9" :offset="1"
        ><el-card class="box-card"
          ><el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><strong>最新公告通知</strong></span>
              <el-button style="float: right; padding: 10px 10px" type="text"
                >最新信息</el-button
              >
            </div>
            <!-- <div v-for="o in 4" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div> -->
            <Getnotice></Getnotice>
          </el-card></el-card
        >
      </el-col>
      <!-- <el-col :span="6" :offset="0"
        ><el-card class="box-card">111111</el-card>
      </el-col> -->
      <el-col :span="9" :offset="2"
        ><el-card class="box-card"><Getbmecharts></Getbmecharts> </el-card>
      </el-col>
    </el-row>
    <br />
    <!-- <el-row :gutter="20">
      <el-col :span="6" :offset="6"
        ><el-card class="box-card">3333333</el-card></el-col
      >
      <el-col :span="6" :offset="6"
        ><el-card class="box-card">4444444</el-card></el-col
      >
    </el-row> -->
    <el-row :gutter="24">
      <el-col :span="9" :offset="1">
        <el-card class="box-card">
          <div class="video-player vjs-custom-skin">
            <video id="myVideo" class="video-js" :playsinline="false">
              <source src="../../../assets/images/12.mp4" type="video/mp4" />
            </video>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="1"
        ><div>
          <el-card class="box-card">
            <el-carousel :interval="1200" type="card">
              <el-carousel-item v-for="itemurl in imagelist" :key="itemurl">
                <img :src="itemurl" alt="无图片" />
              </el-carousel-item>
            </el-carousel>
          </el-card></div
      ></el-col>
    </el-row>
  </div>
</template>

    <script>
import Getbmecharts from "../../echarts/bmecharts/index";
import Getnotice from "../../system/notice/indexfu.vue";
export default {
  name: "TestTwo",
  data() {
    return {
      imagelist: [
        require("../../../assets/images/1.jpeg"),
        require("../../../assets/images/1.jpg"),
        require("../../../assets/images/12.jpg"),
        require("../../../assets/images/uuuu.jpg"),
      ],
    };
  },
  components: {
    Getbmecharts,Getnotice
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    initVideo() {
      //初始化视频方法
      let myPlayer = this.$video(myVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        volume: 0.1,
        preload: "auto",
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        //自动播放属性,muted:静音播放
        autoplay: "muted",
        // autoplay: "true",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "500px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "320px",
        language: "zh-CN",
        aspectRatio: "9:6", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      });
    },
  },
};
</script>

 <style>
   .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }



/* --------------- */

img {
  display: inline-block;
  width: 100%;
  /* text-align: center; */
  /* height: 300px; */
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

/* 图片 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
